import React, { PureComponent } from 'react';
import { connect } from 'dva';
class Progress extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            
        }
        this.animate = this.animate.bind(this)
    }
    animate() {
        var img = document.querySelector("#displacementFilter feTurbulence");
        var frames = 0;
        var rad = Math.PI / 180;
        this.myAni = function AnimateBaseFrequency() {
            var bf = "0.01 .1",
                bfx = Number(bf.split(" ")[0]),
                bfy = Number(bf.split(" ")[1]);
            frames += .5
            bfx += 0.001 * Math.cos(frames * rad);
            bfy += 0.005 * Math.sin(frames * rad);

            bf = bfx.toString() + ' ' + bfy.toString();
            img.setAttributeNS(null, 'baseFrequency', bf);

            requestAnimationFrame(AnimateBaseFrequency);
        }

        window.requestAnimationFrame(this.myAni);
    }
    componentDidMount() {
        this.animate()
    }
    componentWillUnmount() {
        window.cancelAnimationFrame(this.myAni)
    }
    render() {
        return (
            <div className="progress">
                <svg style={{ background: "#f8f8f8", borderRadius: "50%" }} width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
                    <filter id="displacementFilter">
                        <feTurbulence type="turbulence" baseFrequency="0.01 .1" numOctaves="1" result="turbulence" seed="53" />
                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="B" />
                    </filter>
                    <g id="wave" filter="url(#displacementFilter)">
                        <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
                            <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
                        </path>
                    </g>
                    <circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
                    <circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
                    <text class="liquidFillGaugeText" text-anchor="middle" font-size="32px" transform="translate(100,115)" style={{ fill: '#000' }}>运算中...</text>
                </svg>
            </div>
        )
    }
}
export default connect(
    ({ }) => ({}),
    dispatch => ({

    })
)(Progress);
